<!--优惠券 激活 界面-->
<template>
	<div>
		<!--车牌号那一行 框-->
		<el-row>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">车牌号:</p>
			</el-col>
			<el-col :span="4"
			        style="padding-right:15px ;">
				<el-input v-model="plateNum"
				          placeholder="请输入车牌号"
				          size="small">
				</el-input>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">优惠券号:</p>
			</el-col>
			<el-col :span="4"
			        style="padding-right:15px ;">
				<el-input v-model="num"
				          placeholder="请输入优惠券号"
				          size="small">
				</el-input>
			</el-col>
			<el-col :span="1">
				<el-button type="primary"
				           @click="resRoleQuery"
				           size="small">查询</el-button>
			</el-col>
			<el-col :span="13" style="margin-left: -20px; text-align: right">
				           <el-button type="primary"
				           @click="msgEdit"
				           size="small">详情</el-button>
				           <el-button type="primary"
				           @click="startGroup"
				           size="small">激活</el-button>
			</el-col>
		</el-row>
		<!--车牌号那一行  框 结束-->
		<!--表格-->
		<!--

																		作者：吴彦昭
																		时间：2017-03-20 17:50
																		描述：表格整理
																	-->

		<el-table :data="tableData.dataList"
		          border
		          style="width: 100%;height:460px;"
		          @selection-change="handleSelectionChange">
		          <el-table-column type="selection"
						    	             width="60"
						    	             fixed
						    	             >
                            </el-table-column>
			<el-table-column prop="num"
			                 label="优惠劵号"
			                 width="200"
			                 align="right">
			</el-table-column>
			<el-table-column prop="name"
			                 label="所属活动"
			                 width="300">
			</el-table-column>
			<el-table-column prop="plateNum"
			                 label="车牌号"
			                 width="120">
			</el-table-column>
			<el-table-column prop="contactName"
			                 label="车主姓名"
			                 width="200">
			</el-table-column>
			<el-table-column prop="contactPhone"
			                 label="车主电话"
			                 width="250"
			                 align="right">
			</el-table-column>
			<el-table-column prop="youxiaoqi"
			                 label="过期时间"
			                 :formatter="formatTime"
			                 width="150"
			                 align="center">
			</el-table-column>


		</el-table>
		<!--表格 结束-->
		<!--翻页 开始-->
		<el-pagination small
		               @size-change="handleSizeChange"
		               @current-change="handleCurrentChange"
		               :current-page="CurentPage"
		               :page-sizes="page.pageSizes"
		               :page-size="page.pageSize"
		               layout=" total,prev, pager, next"
		               :total="tableData.total">
		</el-pagination>
		<!--翻页 结束-->
		<!--弹出框 开始-->
		<el-dialog title="优惠劵补发详情"
		           v-model="msgFormShow">
			<el-form :model="msgFormData"
			         label-width="140px">
				<el-form-item label="所属套餐">
					<el-input v-model="msgFormData.name"
					          auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="赠送礼品">
					<el-input v-model="msgFormData.gift"
					          auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="礼品价值">
					<el-input v-model="msgFormData.cost"
					          auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="车主姓名">
					<el-input v-model="msgFormData.contactName"
					          auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="车主电话">
					<el-input v-model="msgFormData.contactPhone"
					          auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="车牌号">
					<el-input v-model="msgFormData.plateNum"
					          auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="VIN">
					<el-input v-model="msgFormData.vin"
					          auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="优惠劵号">
					<el-input v-model="msgFormData.num"
					          auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="使用状态">
					<el-input v-model="msgFormData.status"
					          auto-complete="off"></el-input>
				</el-form-item>

				<el-form-item label="有效期至">
					<el-input v-model="msgFormData.youxiaoqi"
					          auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="工单号">
					<el-input v-model="msgFormData.gongdanId"
					          auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="使用备注">
					<el-input v-model="msgFormData.useRemark"
					          auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="发券人">
					<el-input v-model="msgFormData.createCode"
					          auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="打印人">
					<el-input v-model="msgFormData.dayinCode"
					          auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="打印时间">
					<el-input v-model="msgFormData.dayinDate"
					          auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!--弹出框 结束-->
	</div>
</template>
<script>//首页 切换页 申请列表 和 申请补发
//先写的 申请补发

export default {
	data: function () {
		return {
			//查询条件
			//车牌号
			plateNum: '',
			//优惠劵号码
			num: '',
			id: '',
			//申请列表
			formInline: {
				user: '',
				region: ''
			},

			//页码数001
			CurentPage: 1,
			//每页的数量
			page: this.page,
			//分组数据
			tableData: {
				total: 0,
				dataList: []
			},

			//点击查询按钮 后  显示  弹出框
			msgFormData: {
				name: '',
				gift: '',
				cost: '',
				contactName: '',
				contactPhone: '',
				plateNum: '',
				vin: '',
				num: '',
				status: '',
				useDate: '',
				youxiaoqi: '',
				gongdanId: '',
				useRemark: '',
				caozuoName: '',
				caozuoCode: '',
				dayinCode: '',
				dayinName: '',
				dayinDate: ''
			},
			//点击查询 显示出表单
			msgFormShow: false,

			//表单名称
			formLabelAlign: {
				name: '',
				region: '',
				type: ''
			},
			//弹出框
			dictFormData: {
				tGroup: '',
				tGroupName: '',
				tDisp: '',
			},
			btnGroup: {},
			multipleSelection:[],
		}
	},
	methods: {
		//选择框
		handleSelectionChange:function(val){
			debugger;
			this.$data.multipleSelection = val;
			if(this.$data.multipleSelection.length > 1)
			this.$message.error("请选择一条数据！");
		},
		//加载列表
		resRoleQuery: function () {
			//debugger;
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/crm/coupon/actionPage', //url
				params: { //发送的参数
					start: this.$data.CurentPage, //页码
					limit: this.$data.page.pageSize, //每页的数量
					//绑定 数据 加载  此处绑定的是 车牌号
					plateNum: this.$data.plateNum, //车牌号
					num: this.$data.num // 优惠劵
				}
			}).then(function (resp) {
				debugger;
				resp.data.total = parseInt(resp.data.total);
				this.$data.tableData = resp.data;
			}, function (error) {
				// error
			})
		},
		//列表，分页大小切换
		handleSizeChange: function () { },
		//列表,当前页切换
		handleCurrentChange: function (currentPage) {
			this.$data.CurentPage = currentPage;
			//this.$data.dictGroup = '';
			this.resRoleQuery();
		}, //分页传参 结束
		//独立组件
		//日期转换
		formatTime: function (row, column) {
			if (row.youxiaoqi == "" || row.youxiaoqi == null) return "";
			return this.moment(Number(row.youxiaoqi)).format("YYYY-MM-DD HH:mm:ss");
		},

		/*表格内部 按钮事件 */
		startDict: function (index) {
			var data = this.$data.tableData.dataList[index]; //通过索引号 来获取当前数组中的数据
			Object.assign(this.$data.dictFormData, data);

		},
		/*表格结尾的 三个按钮事件 */
		//启用分组 尚未完成
		//第一个 按钮
		//编辑查看 分组 尚未完成
		msgEdit: function () {
			if(this.$data.multipleSelection.length==1){

			var resRoleData = this.$data.multipleSelection[0];
			console.log("触发 查看按钮");
			//修改可编辑属性
			this.$data.msgNameEdit = true;
			this.$http.get(this.API_ROOT + '/crm/coupon/actionInfo', {
				params: {
					id: resRoleData.id
				}
			}).then((response) => {
				//‘dayinDate’  的 时间戳 转成时间格式
				response.data.data.dayinDate = this.moment(response.data.data.dayinDate).format("YYYY-DD-MM");
				//转成时间格式‘youxiaoqi’
				response.data.data.youxiaoqi = this.moment(response.data.data.youxiaoqi).format("YYYY-DD-MM");
				//状态
				if (response.data.data.status == '1') {
					response.data.data.status = '已打印';
				}

				this.$data.msgFormData = Object.assign(this.$data.msgFormData, response.data.data);
			}, (response) => {
				// error callback
			});
			this.$data.msgFormShow = true;
			}else{
				this.$message.error("请选择一条数据");
			}
		},
		//第二个 允许补发 按钮
		startGroup: function () {
			if(this.$data.multipleSelection.length==1){

			var resRoleData = this.$data.multipleSelection[0];

			console.log("触发 补发按钮");
			//debugger;
			this.$http({
				method: 'POST',
				url: this.API_ROOT + '/crm/coupon/actionUpdate',
				params: {
					id: resRoleData.id,
				}
			}).then(function (resp) {
				this.resRoleQuery();
			}, function (error) {
				// error
			})
			}else{
				this.$message.error("请选择一条数据");
			}
		},

		//自动加载  独立组件
		//自动加载 组件创建时自动运行 开始
		//原理  ：一般可以在created函数中调用ajax获取页面初始化所需的数据。
	},
	created: function () { //实现效果 点击“查询”按钮 实现函数的调用
		this.resRoleQuery(); //将要  调用的 函数名称

		this.$http({
			method: 'GET',
			url: this.API_ROOT + '/rbac/login/btn', //url 输出 按照车牌号的 车牌号
			params: { //发送的参数
				resPath: "crm/campaign/couponActivation", ////查询条件 按照输入的车牌号
			}
		}).then(function (resp) {
			var btnData = resp.data.dataList;

			var temp = {};

			for (var i = 0; i < btnData.length; i++) {

				var btnName = btnData[i].btnName;

				temp[btnName] = btnName;

			}

			Object.assign(this.$data.btnGroup, temp);
		}, function (error) {
			// error
		})
	}, //自动加载 组件创建时自动运行 结束

}</script>